
<script setup> 
import { ref } from 'vue';
const index = ref(1)
const checks = () => {
  console.log(111);
}
</script>

<template>
  <view class="tab_nav">
    <view class="video" @click="index = 1">
      <image
        src="../../static/images/video.png"
        mode="scaleToFill"
      
      />
    </view>
    <view class="photo" @click="index = 0">
      <image
        src="../../static//images/data_photo.png"
        mode="scaleToFill"
      />
    </view>
  </view>
  <view class="video_content" v-if="index === 1">
    我是视频
  </view>
  <view class="video_content" v-if="index === 0">
    我是照片
  </view>

</template>


<style lang="scss">
page {
  height: 100%;
  background-color: #f3f2f2;
}
.tab_nav {
  // position: absolute;
  // z-index: 999;
  display: flex;
  width: 100%;
  height: 250rpx;
  // background-color: #bfa;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,.2);
  .video {
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #ccc;
    width: 50%;
    height: 100%;
    // background-color: red;
    background-color: #fff;
    image {
      height: 50%;
      width: 50%;
    }
  }
  .photo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    // background-color:blue;
    background-color: #fff;
    image {
      height: 50%;
      width: 50%;
    }
    
  }
}

.video_content {
  // position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f0eeee;
}

</style>